<template>
    <el-dialog :model-value="dialogVisible" :title="title" width="65%" @close="handleClose" align-center>

        <div class="container">
            <el-scrollbar>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
                    status-icon>
                    <el-form-item label="图片" prop="url">
                        <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="ruleForm.status">
                            <el-radio :value="0" size="large" border>正常</el-radio>
                            <el-radio :value="1" size="large" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio :value="0" size="large" border>轮播图</el-radio>
                            <el-radio :value="1" size="large" border>风景</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </el-scrollbar>
        </div>

        <template #footer class="footer">
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>


<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { addGalleryAPI, UploadImgAPI, updateGalleryAPI } from '@/api';

const emits = defineEmits(['update:modelValue', 'initGalleryList'])

const originalData = () => ({
    id: '',
    status: 0,
    url: '',
    type: 0
})

let ruleForm = reactive(originalData())

const fileList = ref([])

const props = defineProps({
    title: {
        type: String,
        default: "标题"
    },
    dialogVisible: {
        type: Boolean,
        default: false
    },
    galleryValue: {
        type: Object,
        default: {}
    },
    id: {
        type: Number,
        default: -1,
    }
})

const handleClose = () => {
    emits('update:modelValue', false)
}

const handleConfirm = async () => {
    //先获取fileList图片调后端接口上传图片
    const formData = new FormData()
    if (fileList.value[0].raw) {
        formData.append("file", fileList.value[0].raw)
        const res = await UploadImgAPI(formData)
        ruleForm.url = res
    }
    let ras = reactive()
    const rus = ref()
    if (props.id == -1) {
        ras = await addGalleryAPI(ruleForm)
        rus.value = "添加成功"
    }
    else {
        ras = await updateGalleryAPI(ruleForm)
        rus.value = "更新成功"
    }
    if (ras != false) {
        ElMessage.success(rus.value)
        emits('initGalleryList')
        handleClose()
    }
}
const rules = reactive({})

watch(
    () => props.dialogVisible,
    () => {
        if (props.id != -1) {
            let img = []
            let obj = {}
            ruleForm = props.galleryValue
            obj.url = ruleForm.url
            img.push(obj)
            fileList.value = img
        }
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.container {
    margin: 20px 40px;
    font-family: "微软正黑体";
    font-size: 16px;
    font-weight: 800;
}
</style>